<template>
	<view class="unit">
		<view class="unit-top" :style="tabberStyle">
			<view class="unit-top-search ff-bg-blue ff-padding-15">
				<u-search v-model="params.companyName" :height="80" :show-action="false" @change="unitNameChange"
					:clearabled="true" placeholder="单位名称" input-align="center" :action-style="actionStyle"></u-search>
			</view>
			<view class="ff-bg-fff ff-flex ff-relative ff-padding-top-5 ff-padding-bottom-5">
				<view class="unit-top-select1 ff-padding-2">
					<uni-data-select v-model="companyTypeIndex" placeholder="单位类型" :localdata="companyTypeList"
						@change="changeCompanyType"></uni-data-select>
				</view>
				<view class="unit-top-select1 ff-padding-2">
					<uni-data-select v-model="onlineIndex" :unitparams.sync="unitParams" placeholder="上线情况"
						:localdata="onlineList" @change="changeOnline"></uni-data-select>
				</view>
				<view class="unit-top-select1 ff-padding-2">
					<uni-data-select v-model="monthMainIndex" :maintenanceparams.sync="maintenanceParams"
						placeholder="维保情况" :localdata="monthMainList" @change="changeMonthMain"></uni-data-select>
				</view>
				<view class="unit-top-select1 ff-padding-2">
					<uni-data-select v-model="regTimeIndex" placeholder="注册时间" :localdata="regTimeList"
						@change="changeRegTime"></uni-data-select>
				</view>
			</view>
			<view class="ff-bg-f5 ff-color-B5BBC8 ff-font-13">共计<text class="ff-color-blue">{{total || '0'}}家</text>单位
			</view>
		</view>
		<view class="unit-content" v-if="unitList">
			<view v-if="unitList.length > 0">
				<view v-for="(item, index) of unitList" :key="index" @click="unitClick(item)"
					class="unit-content-box ff-relative ff-margin-12 ff-padding-12 ff-bg-fff ff-border-radius-10">
					<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-2 ff-line-height-1-3">
						{{item.companyName}}
					</view>
					<view class="unit-content-box-tips ff-margin-bottom-8">
						<view class="ff-align-items-one ff-font-12 ff-color-fff">
							<view>
								<view class="tips1" v-if="item.companyType == 1">消防安全重点单位</view>
								<view class="tips3" v-if="item.companyType == 2">一般单位</view>
								<view class="tips2" v-if="item.companyType == 3">火灾高危单位</view>
								<view class="tips3" v-if="item.companyType == 4">有消防设施的社区</view>
								<view class="tips3" v-if="item.companyType == 5">其他</view>
							</view>
							<view class="ff-margin-left-10">
								<view class="tips4" v-if="item.isOnline == 0">未上线</view>
								<view class="tips5" v-if="item.isOnline == 1">已上线</view>
							</view>
						</view>
					</view>
					<view class="ff-color-5C5F65">
						<view class="ff-margin-bottom-8">统一社会信用代码：{{item.organizationCode}}</view>
						<view>已维保次数：{{item.maintenanceNum}}次</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else topStyle="30%"></f-noData>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		props: ['unitParams', 'maintenanceParams'],
		data() {
			return {
				actionStyle: {
					'color': '#fff'
				},
				companyTypeIndex: '11',
				companyTypeList: [{
						value: 1,
						text: "消防安全重点单位"
					},
					{
						value: 2,
						text: "一般单位"
					},
					{
						value: 3,
						text: "火灾高危单位"
					},
					{
						value: 4,
						text: "有消防设施的社区"
					},
					{
						value: 5,
						text: "其他"
					},
				],
				onlineIndex: '11',
				onlineList: [{
						value: '0',
						text: "未上线"
					},
					{
						value: '1',
						text: "已上线"
					}
				],
				monthMainIndex: '11',
				monthMainList: [{
						value: '0',
						text: "本月未维保"
					},
					{
						value: '1',
						text: "本月已维保"
					}
				],
				regTimeIndex: '11',
				regTimeList: [{
						value: 2,
						text: "上线时间"
					},
					{
						value: 3,
						text: "维保次数"
					}
				],
				unitList: [], // 单位列表数据
				total: '',
				params: {
					current: 1,
					size: 25,
					companyName: '', // 搜索字符
					isOnline: '', // 上线情况(0.未上线 1.已上线)
					companyType: '', // 单位类别(1:消防安全重点单位 2: 一般单位 3：火灾高危单位,4-由消防设施的社区,5其他)
					currentMonthMaintenanceStatus: '', // 本月维保情况 本月维保情况(0未维保1已维保)
					sortField: 1, // 1注册时间 2上线时间 3维保次数)
				},
				noData: false, // 没有更多了
				isOnline: '', // 上线情况
				currentMonthMaintenanceStatus: '' // 本月维保情况
			}
		},
		onLoad() {},
		computed: {
			tabberStyle() {
				return `top:${this.customBar}px;`;
			}
		},
		watch: {
			// 社会单位
			unitParams: {
				handler(val) {
					// console.log('社会单位传过来的值', val)
					/*  this.$nextTick(() => dom更新完在执行方法，它主要用于 DOM 操作。
						当我们修改 Vue 组件中的数据时，Vue.js 会在下次事件循环前自动更新视图，
						并异步执行 $nextTick() 中的回调函数。
						这个过程可以确保DOM 已经被更新，以及可以操作到最新的 DOM。 */
					setTimeout(() => {
						if (val == '未上线') {
							this.params.isOnline = 0
							// uni.setStorageSync('isOnline', 0)
							this.isOnline = 0
							this.getunitList(); // 获取单位列表
						} else if (val == '已上线') {
							this.params.isOnline = 1
							this.isOnline = 1
							this.getunitList(); // 获取单位列表
						} else {}
					}, 500)
				},
				deep: true,
				immediate: true
			},
			// 维保情况
			maintenanceParams: {
				handler(val) {
					console.log('维保情况传过来的值', val)
					setTimeout(() => {
						if (val == '本月未维保') {
							this.params.currentMonthMaintenanceStatus = 0
							this.currentMonthMaintenanceStatus = 0
							this.getunitList(); // 获取单位列表
						} else if (val == '本月已维保') {
							this.params.currentMonthMaintenanceStatus = 1
							this.currentMonthMaintenanceStatus = 1
							this.getunitList(); // 获取单位列表
						} else {}
					}, 500)
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 切换单位类型
			changeCompanyType(e) {
				// console.log("切换单位类型:", e);
				this.params.companyType = e
				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// 切换上线情况
			changeOnline(e) {
				// console.log("切换上线情况:", e);
				if (e) {
					this.isOnline = e
					this.params.isOnline = e
				} else {
					this.isOnline = ''
					this.params.isOnline = ''
				}
				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// 切换本月维保情况
			changeMonthMain(e) {
				// console.log("切换本月维保情况:", e);
				if (e) {
					this.currentMonthMaintenanceStatus = e
					this.params.currentMonthMaintenanceStatus = e
				} else {
					this.currentMonthMaintenanceStatus = ''
					this.params.currentMonthMaintenanceStatus = ''
				}

				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// 切换注册时间
			changeRegTime(e) {
				// console.log("切换注册时间:", e);
				this.params.sortField = e
				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// onShow监听刷新
			showLoading() {
				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// 上拉加载
			pullLoading() {
				if (!this.noData) {
					this.params.isOnline = this.isOnline
					this.params.currentMonthMaintenanceStatus = this.currentMonthMaintenanceStatus
					this.params.current++;
					this.getunitList(); // 获取单位列表
				}
			},
			// 下拉刷新
			downLoading() {
				let that = this;
				that.params.isOnline = that.isOnline
				that.params.currentMonthMaintenanceStatus = that.currentMonthMaintenanceStatus
				that.params.current = 1;
				that.getunitList(); // 获取单位列表
				setTimeout(() => {
					// that.$refs.uToast.show({
					// 	title: '刷新成功',
					// 	type: 'success'
					// });
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 搜索项目
			unitNameChange() {
				// console.log('当前搜索的值----', this.companyName)
				this.params.current = 1;
				this.getunitList(); // 获取单位列表
			},
			// 获取的单位列表数据
			async getunitList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/supervise/superviseCompanyPage',
					data: this.params
				});
				// console.log('获取的单位列表数据------', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.unitList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						this.noData = true;
						this.unitList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.unitList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.unitList = this.unitList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
					this.total = data.data.total
				} else {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 打开单位详情页
			unitClick(item) {
				this.$emit('handleScroll')
				this.$pageJump.navigateTo('/pages/supervise/unit/components/unitDetails?id=' + item.id)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.unit {
		&-top {
			position: fixed;
			width: 100%;
			z-index: 111;

			&-select1 {
				width: 25%;
			}

			&-select2 {
				// width: 25%;
			}

			&-tips {
				background: #f5f5f5;

				&-box {
					background: linear-gradient(to right, #FDEEE1, #FCF6F1);
					border-radius: 30rpx;
					color: #FE9025;
				}

			}

			.ff-color-B5BBC8 {
				padding: 25rpx 30rpx;
			}
		}

		&-content {
			margin-top: 297rpx;

			&-box {
				&-tips {
					.tips1 {
						background-color: #F50000;
						padding: 12rpx 15rpx;
						border-top-right-radius: 25rpx;
						border-bottom-right-radius: 25rpx;
						border-bottom-left-radius: 24rpx;
					}

					.tips2 {
						background-color: #FF9918;
						padding: 12rpx 15rpx;
						border-top-right-radius: 25rpx;
						border-bottom-right-radius: 25rpx;
						border-bottom-left-radius: 24rpx;
					}

					.tips3 {
						background-color: #2B68FF;
						padding: 12rpx 15rpx;
						border-top-right-radius: 25rpx;
						border-bottom-right-radius: 25rpx;
						border-bottom-left-radius: 24rpx;
					}

					.tips4 {
						border: 2rpx solid #9B9B9B;
						background-color: #F8F8F8;
						padding: 12rpx 15rpx;
						color: #9B9B9B;
						border-radius: 10rpx;
					}

					.tips5 {
						border: 2rpx solid #0BCB74;
						background-color: #ECFFF6;
						padding: 12rpx 15rpx;
						color: #0BCB74;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>